<!-- eslint-disable vue/no-mutating-props -->
<template>
  <card class="add-info-card" title="基本信息" toggle v-if="orderDetails">
    <div class="section-item">
      <div class="section-item-content">
        <a-descriptions :size="'medium'" :align="{ label: 'right' }">
          <a-descriptions-item label="工单号">{{ orderDetails.workCode }}</a-descriptions-item>
          <a-descriptions-item label="工单类型">{{ orderDetails.workTypeName }}</a-descriptions-item>
          <a-descriptions-item label="工单状态">
            {{ orderDetails.statusName }}
            <span
              v-if="
                orderDetails.workSonStatus &&
                ((orderDetails.status == 3 && orderDetails.workSonStatus == 31) ||
                  (orderDetails.status == 3 && orderDetails.workSonStatus == 33) ||
                  (orderDetails.status == 4 && orderDetails.workSonStatus == 41) ||
                  (orderDetails.status == 4 && orderDetails.workSonStatus == 42) ||
                  (orderDetails.status == 6 && orderDetails.workSonStatus == 32))
              "
              class="workson_status"
            >
              ({{ orderDetails.workSonStatusName }})
            </span>
          </a-descriptions-item>

          <a-descriptions-item label="归属门店">{{ orderDetails.siteName }}</a-descriptions-item>
          <a-descriptions-item label="工单负责人">{{ orderDetails.workOperatorName }}</a-descriptions-item>
          <a-descriptions-item label="工单指派人">{{ orderDetails.workCompleteUser }}</a-descriptions-item>

          <a-descriptions-item label="工单实际开始时间">{{ orderDetails.startTime }}</a-descriptions-item>
          <a-descriptions-item label="工单实际完成时间">{{ orderDetails.endTime }}</a-descriptions-item>
          <a-descriptions-item label="工单预计完成时间">{{ orderDetails.expectEndTime }}</a-descriptions-item>
          <a-descriptions-item label="是否开启车管家调度模式">{{ orderDetails.isHousekeep == 0 ? '关闭' : '开启' }}</a-descriptions-item>
        </a-descriptions>
      </div>
    </div>
  </card>
  <card class="add-info-card" title="操作流程" toggle :showDivider="false">
    <table-index class="insure-card-table" :table="tableCompulsory" @loadData="loadCompulsoryData">
      <template #other="{ record }">
        <div>{{ record.operationsContent }}</div>
        <div v-if="record.operationsType == 20 || record.operationsType == 21" @click="toOther(record)" class="work-detail">查看详情</div>
      </template>
    </table-index>
  </card>
</template>

<script setup name="ShortOrderDetail">
  import { getDetails } from '@/api/business/workorder'
  import { useTable } from '@/hooks/table'
  import { unitVal } from '@/utils'
  import useNavigate from '@/hooks/useNavigate'
  import { onMounted, ref } from 'vue'
  const { navigateTo } = useNavigate()
  const orderDetails = ref({})
  const props = defineProps({
    workId: Number,
  })
  const loadCompulsoryData = () => {
    const param = {
      id: props.workId,
    }
    tableCompulsory.tableLoading = true
    getDetails(param)
      .then((res) => {
        console.log(res)
        orderDetails.value = res.result
        tableCompulsory.dataList = res.result.operationsLogList
        tableCompulsory.tableLoading = false
      })
      .finally(() => {
        tableCompulsory.tableLoading = false
      })
  }
  // table 配置
  const tableCompulsory = useTable({
    pagination: false,
    columns: [
      { title: '操作时间', dataIndex: 'createTime', width: 120, fixed: 'left' },
      { title: '操作项', dataIndex: 'operationsTypeName', width: 120 },
      { title: '操作人', dataIndex: 'createUserName', width: 120 },
      { title: '操作内容', dataIndex: 'operationsContent', width: 320, slotName: 'other' },
    ],
  })
  // 报销单/付款单 详情
  const toOther = (e) => {
    navigateTo(`/operate-cost/detail/${e.refId}`, `${e.refCode}支出单详情`)
  }
  onMounted(() => {
    loadCompulsoryData()
  })
</script>

<style lang="less" scoped>
  .work-detail {
    color: #1890ff;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
  }
</style>
